<!--
Suspense 异步组件
- 等待异步组件时渲染一些额外内容, 让应用有更好的用户体验.
- 使用步骤:
  - 异步引入组件
	- 使用 Suspense 包裹组件, 并配置好 default 与 fallback
-->
<template>
  <div class="app">
		<h2>我是 App 组件</h2>
		<Suspense>
			<!-- <template #default></template> -->
			<template v-slot:default>
				<Child />
			</template>
			<template v-slot:fallback>
				<h2>加载中......</h2>
			</template>
		</Suspense>	
	</div>
</template>

<script setup lang="ts" name="App">
import { Suspense } from "vue";
import Child from "./Child.vue";
</script>

<style>
.app {
	background-color: #ddd;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 0 10px;
}
</style>